Layout Basics in Figma refers to the fundamental principles and tools used to organize, align, size, space, and structure elements within a design. A good layout helps users understand the relationship between different elements and creates a clear visual hierarchy across websites, mobile applications, dashboards, landing pages, and other digital products.
Figma provides several powerful layout features including Frames, Sections, Layout Guides, Constraints, Auto Layout, alignment tools, spacing controls, resizing options, and responsive design techniques. Understanding these features is essential for creating clean, scalable, consistent, and responsive UI designs.
For professional UI/UX learning and practical Figma training, visit JustAcademy Figma Training and Register for Figma Course Demo.
Layout is the way visual elements are arranged inside a design. It defines the position, size, spacing, alignment, hierarchy, and relationship between elements such as text, images, buttons, cards, navigation bars, forms, and sections.
In Figma, layout is not only about placing objects manually. Professional layouts use structured containers, spacing systems, responsive rules, Auto Layout, constraints, and guides to make designs easier to maintain and adapt.
A well-designed layout helps users scan information quickly and understand the purpose of every section. Poor layout can make even a visually attractive interface confusing or difficult to use.
A typical digital interface can be divided into several structural levels. Understanding parent and child relationships makes complex designs easier to organize.
Page
|
+-- Header
| +-- Logo
| +-- Navigation
| +-- Action Button
|
+-- Hero Section
| +-- Heading
| +-- Description
| +-- CTA
|
+-- Content Section
| +-- Cards
| +-- Images
| +-- Text
|
+-- Footer
+-- Links
+-- Contact
+-- Copyright
Visual hierarchy determines which elements users notice first, second, and third. Layout contributes to hierarchy through position, size, spacing, alignment, contrast, and grouping.
Primary Information
|
v
Secondary Information
|
v
Supporting Information
|
v
Additional Details
Frames are one of the most important layout tools in Figma. A frame acts as a container for other layers such as text, images, shapes, buttons, cards, and nested frames.
Frames can be used to create complete website screens, mobile screens, cards, navigation bars, buttons, sections, and reusable interface structures.
A frame containing other layers is called a parent, while the layers inside it are children. Understanding this relationship is important for constraints, Auto Layout, resizing, and responsive design.
Parent Frame
|
+-- Child Layer 1
+-- Child Layer 2
+-- Child Layer 3
|
+-- Nested Frame
+-- Child Layer 4
+-- Child Layer 5
Figma provides presets for common screen sizes and device formats. These presets are useful when designing websites, mobile applications, tablets, presentations, and social media layouts.
| Layout Type | Typical Use |
|---|---|
| Desktop Frame | Websites and dashboards |
| Tablet Frame | Tablet applications and responsive layouts |
| Mobile Frame | Mobile applications |
| Custom Frame | Special screen sizes |
| Frame | Group |
|---|---|
| Acts as a container | Groups selected layers together |
| Supports Auto Layout | Does not provide the same container-based layout capabilities |
| Supports constraints | Less suitable for responsive structure |
| Supports layout guides | Does not provide frame layout guides |
| Useful for UI structure | Useful for simple organization |
Sections are useful for organizing related designs on the canvas. A section can contain multiple frames and related explorations, making large Figma files easier to navigate.
Section: Login Flow
|
+-- Login Screen
+-- Forgot Password
+-- Reset Password
+-- Success Screen
Alignment ensures that related elements share common visual positions. Consistent alignment creates structure and makes interfaces easier to scan.
Horizontal alignment controls the position of elements along the horizontal axis. Common options include left, center, and right alignment.
Left
|--------------------------------|
Text
Button
Image
|--------------------------------|
Center
|--------------------------------|
Text
Button
Image
|--------------------------------|
Vertical alignment controls how objects are positioned along the vertical axis. It is particularly useful for buttons, navigation bars, cards, and horizontally arranged content.
Top
+----------------+
| Text |
| |
| Button |
+----------------+
Center
+----------------+
| |
| Text Button |
| |
+----------------+
Bottom
+----------------+
| |
| Text |
| Button |
+----------------+
Spacing refers to the distance between elements. Consistent spacing creates rhythm and improves readability. Instead of placing elements randomly, designers should use a defined spacing system.
Heading
|
| 24px
v
Paragraph
|
| 32px
v
Button
| Concept | Meaning |
|---|---|
| Padding | Space between the edge of a container and its children |
| Gap | Space between child elements |
| Margin | External spacing concept commonly used in development |
The 8-point system is a popular approach to UI spacing. Designers use multiples of 8 for dimensions and spacing where appropriate.
8
16
24
32
40
48
56
64
72
80
The 8-point system is a guideline rather than a mandatory rule. Real interfaces may require other values when content or accessibility demands it.
Layout Guides are visual aids that help designers align objects and establish a consistent structure inside frames. Figma provides uniform grid, column, and row guide types.
Frame
|
+-- Layout Guide
| +-- Columns
| +-- Rows
| +-- Uniform Grid
|
+-- Content
+-- Content
+-- Content
A uniform grid divides the frame into equally sized cells. It can help designers maintain consistent spacing and alignment, especially for interfaces that use repeated dimensions.
+----+----+----+----+
| | | | |
+----+----+----+----+
| | | | |
+----+----+----+----+
| | | | |
+----+----+----+----+
Column guides divide a layout vertically and are especially useful for website layouts, dashboards, landing pages, and editorial interfaces.
| Margin | Col | Gap | Col | Gap | Col | Margin |
| | | | | | | |
Row guides divide a layout horizontally. They can help organize vertical sections and establish consistent horizontal alignment.
+--------------------------------+
| Header |
+--------------------------------+
| Hero |
+--------------------------------+
| Content |
+--------------------------------+
| Footer |
+--------------------------------+
Layout Guides and Auto Layout Grid are different concepts. Layout Guides are visual alignment aids, while Auto Layout Grid controls how content is arranged within an Auto Layout frame.
| Layout Guides | Auto Layout Grid |
|---|---|
| Visual design aid | Actual layout behavior |
| Helps alignment | Controls rows and columns |
| Does not itself rearrange content | Can respond to content and resizing |
Constraints define how child layers respond when their parent frame is resized. They are useful for creating layouts where elements need to remain anchored to particular sides or positions.
Parent Frame Resizes
|
v
Constraint Rule
|
+-- Left
+-- Right
+-- Top
+-- Bottom
+-- Center
+-- Scale
|
v
Child Layer Responds
A Left constraint keeps an object positioned relative to the left side of its parent frame when the parent changes size.
+--------------------------+
| Button |
| |
| |
+--------------------------+
A Right constraint anchors an element to the right side of its parent. This is useful for action buttons, icons, and right-aligned controls.
+--------------------------+
| Icon |
| |
| |
+--------------------------+
Top and Bottom constraints help maintain vertical relationships when a parent frame changes height. They can be useful for headers, footers, and anchored controls.
+--------------------------+
| Header Top |
| |
| |
| Footer Bottom |
+--------------------------+
Center constraints can keep an object centered relative to its parent. They are useful for empty states, hero content, modal content, and centered icons.
+--------------------------+
| |
| +--------+ |
| | Object | |
| +--------+ |
| |
+--------------------------+
Scale constraints allow an element to respond proportionally as the parent changes size. They can be useful for specific visual compositions, although they should be used carefully for UI elements where fixed spacing or responsive behavior is more appropriate.
| Constraints | Auto Layout |
|---|---|
| Controls how child layers respond to parent resizing | Controls flow and arrangement of content |
| Useful for anchored positioning | Useful for dynamic layouts |
| Works with regular parent frames | Applied to frames and containers |
| Useful for responsive positioning | Useful for responsive structure |
Auto Layout is a Figma feature that automatically arranges and spaces child layers within a frame. It helps designs respond to content changes and makes components and layouts more flexible.
Auto Layout can use vertical, horizontal, or grid flows and provides controls for spacing, padding, alignment, wrapping, and resizing.
Horizontal Auto Layout arranges child elements along the horizontal axis. It is useful for navigation bars, button groups, tags, icon rows, and horizontal cards.
+--------------------------------+
| Logo | Home | About | Contact |
+--------------------------------+
Vertical Auto Layout arranges children from top to bottom. It is useful for forms, lists, cards, article sections, and mobile screen content.
+----------------------+
| Heading |
| Description |
| Input |
| Input |
| Button |
+----------------------+
Grid Auto Layout provides two-dimensional organization using rows and columns. It is useful for structured interfaces such as dashboards, galleries, bento layouts, and certain table-like designs.
+--------+--------+--------+
| Card 1 | Card 2 | Card 3 |
+--------+--------+--------+
| Card 4 | Card 5 | Card 6 |
+--------+--------+--------+
Padding controls the space between the boundary of an Auto Layout frame and its child layers. Padding can be equal on all sides or adjusted independently.
+--------------------------+
| Padding |
| +------------------+ |
| | Content | |
| +------------------+ |
| Padding |
+--------------------------+
Gap controls the distance between children inside an Auto Layout frame. Using a consistent gap creates predictable spacing between related elements.
Heading
|
| Gap
v
Description
|
| Gap
v
Button
Alignment determines how children are positioned within the available space of the Auto Layout frame. It is especially useful when children have different dimensions.
| Alignment | Example Use |
|---|---|
| Start | Text content |
| Center | Centered controls |
| End | Right-aligned actions |
| Stretch | Full-width content |
Hug Contents allows an Auto Layout frame or supported layer to size itself according to its content. This is extremely useful for buttons, tags, badges, and dynamic cards.
Short Text
|
v
+-----------+
| Button |
+-----------+
Longer Text
|
v
+----------------------+
| Longer Button Text |
+----------------------+
Fill Container allows a child layer to use the available space inside its parent Auto Layout container. It is useful for full-width inputs, cards, content areas, and responsive sections.
+--------------------------+
| |
| +--------------------+ |
| | Fill Container | |
| +--------------------+ |
| |
+--------------------------+
Fixed sizing keeps an object's width or height at a defined value. Fixed dimensions can be useful for icons, avatars, specific controls, or layouts where a stable dimension is required.
Minimum and maximum dimensions help control how far an Auto Layout object can shrink or grow. They are useful for responsive components that need limits.
Minimum Width
|
v
Responsive Width
|
v
Maximum Width
Wrap allows items in horizontal or vertical Auto Layout flows to move into additional rows or columns when available space becomes insufficient. This can be useful for tags, chips, lists, and responsive collections.
Wide
+--------------------------+
| Tag 1 | Tag 2 | Tag 3 |
+--------------------------+
Narrow
+--------------------------+
| Tag 1 | Tag 2 |
| Tag 3 |
+--------------------------+
Nested Auto Layout means placing an Auto Layout frame inside another Auto Layout frame. This allows designers to create complex layouts while keeping individual areas responsive.
Page
|
+-- Header Auto Layout
|
+-- Content Auto Layout
| |
| +-- Card Auto Layout
| | +-- Image
| | +-- Text
| | +-- Button
| |
| +-- Card Auto Layout
|
+-- Footer Auto Layout
Responsive design means creating layouts that adapt to different screen sizes and content conditions. In Figma, responsive behavior can be designed using Auto Layout, constraints, resizing properties, layout guides, and nested frames.
Desktop
|
v
Tablet
|
v
Mobile
|
v
Same Design System
Different Layout Behavior
Desktop layouts generally have more horizontal space. Designers often use wider content containers, multi-column structures, navigation bars, sidebars, and larger visual sections.
+------------------------------------------------+
| Logo Navigation CTA |
+------------------------------------------------+
| |
| Hero Content |
| |
+------------------------------------------------+
| Card | Card | Card |
+------------------------------------------------+
Tablet layouts have less horizontal space than desktop layouts and may require fewer columns, reduced spacing, or rearranged navigation.
+--------------------------------------+
| Logo Menu CTA |
+--------------------------------------+
| Hero |
+--------------------------------------+
| Card | Card |
+--------------------------------------+
Mobile layouts prioritize vertical content flow because horizontal space is limited. Navigation, cards, forms, and content sections often become stacked.
+----------------------+
| Logo Menu |
+----------------------+
| Heading |
| Description |
| Button |
+----------------------+
| Card |
+----------------------+
| Card |
+----------------------+
A content container defines the maximum area where primary content is placed. It prevents content from becoming excessively wide on large screens and creates consistent alignment.
Wide Screen
+------------------------------------------------+
| +------------------------------------+ |
| | Content Container | |
| +------------------------------------+ |
+------------------------------------------------+
Large screens can provide more space than users need for comfortable reading. A maximum content width can help maintain readability and consistent visual composition.
For example, an article layout may use a constrained reading width while a dashboard may use a wider container.
Margins create space between the content container and the edges of the screen. Consistent margins help establish a strong visual structure.
Screen Edge
|
v
Margin
|
v
Content Container
|
v
Margin
|
v
Screen Edge
Columns are commonly used in desktop websites. A grid-based column system helps designers align text, images, cards, and other content consistently.
+----+----+----+----+----+----+
| C1 | C2 | C3 | C4 | C5 | C6 |
+----+----+----+----+----+----+
Gutters are the spaces between columns. Consistent gutters prevent content from appearing crowded and help create predictable relationships between columns.
| Column | Gap | Column | Gap | Column |Layout rhythm refers to the repeated use of spacing, alignment, sizing, and visual patterns throughout a design. A consistent rhythm makes interfaces feel organized and intentional.
8px
16px
24px
32px
48px
64px
|
v
Consistent Visual Rhythm
White space is the empty space surrounding and between design elements. It does not necessarily have to be white; it simply means intentionally unused visual space.
The proximity principle states that related elements should be positioned close together while unrelated elements should have more separation.
Related
Heading
Description
Button
More Space
Unrelated
Next Section
Alignment creates invisible lines that connect related elements. A consistent left edge, center line, or right edge can make a design feel significantly more organized.
Heading
|
Description
|
Button
|
Card Content
Repeated spacing, card dimensions, button structures, and alignment patterns create consistency. Repetition is one of the foundations of a scalable design system.
Contrast helps distinguish important elements from supporting content. Layout can create contrast through size, spacing, position, and grouping in addition to color and typography.
Typography and layout work together. Font size, line height, text width, and spacing influence the amount of space a text block occupies.
Typography
+
Container Width
+
Line Height
+
Spacing
=
Text Layout
Images should be positioned and sized consistently. Designers should consider aspect ratio, cropping, alignment, padding, and responsive behavior.
| Image Use | Important Layout Consideration |
|---|---|
| Hero Image | Large responsive area |
| Card Image | Consistent aspect ratio |
| Avatar | Fixed dimensions |
| Product Image | Consistent product presentation |
Buttons should have consistent padding, label alignment, height, and spacing. Auto Layout is particularly useful because button width can adapt to different labels.
+----------------------+
| Buy Now |
+----------------------+
Padding
+ Gap
Label
+ Gap
Padding
Cards are common UI structures that contain multiple layers. A typical card can use nested Auto Layout to control image, content, metadata, and actions.
+--------------------------+
| Image |
+--------------------------+
| Title |
| Description |
| Metadata |
| |
| Action Button |
+--------------------------+
Navigation layouts require consistent alignment and spacing. Desktop navigation may use horizontal Auto Layout while mobile navigation may use a compact or vertical structure.
Logo | Home | Products | About | Contact | LoginForms should have clear vertical spacing between labels, inputs, helper messages, and buttons. Auto Layout can make forms adapt to changing content.
Label
|
Input
|
Helper Text
|
Label
|
Input
|
Button
Dashboards require strong alignment because they often contain navigation, metrics, charts, tables, filters, and action controls.
Dashboard
|
+-- Sidebar
|
+-- Main Content
|
+-- Header
+-- Metrics
+-- Charts
+-- Tables
E-commerce layouts commonly include navigation, search, product grids, filters, product information, pricing, and checkout controls.
Header
|
Search
|
Category Navigation
|
+-- Filters
+-- Product Grid
| +-- Product Card
| +-- Product Card
| +-- Product Card
|
Footer
Mobile cards should use compact spacing while preserving readability and touch-friendly controls. Auto Layout makes it easier to handle different content lengths.
+----------------------+
| Image |
| Title |
| Description |
| Price Button |
+----------------------+
Components allow reusable UI structures to be maintained consistently. Layout rules such as Auto Layout, spacing, padding, and resizing can be built into components.
Main Component
|
+-- Auto Layout
|
+-- Icon
+-- Label
+-- Action
Component variants can represent different states or configurations while maintaining the same underlying layout structure.
| Variant | Example |
|---|---|
| Size | Small, Medium, Large |
| State | Default, Hover, Disabled |
| Type | Primary, Secondary, Tertiary |
Variables can complement layout systems by storing reusable values such as spacing, dimensions, colors, and other supported design tokens. This helps create a more scalable design system.
Design Tokens
|
+-- Spacing
| +-- 8
| +-- 16
| +-- 24
|
+-- Radius
|
+-- Typography
|
+-- Colors
Manual positioning can work for simple static designs, but it becomes difficult to maintain when content changes. Whenever a layout needs to respond to content, consider Auto Layout or another structured layout approach.
Manual Positioning
|
v
Content Changes
|
v
Repeated Adjustments
|
v
Hard to Maintain
Structured Layout
|
v
Content Changes
|
v
Automatic Adjustment
Fixed dimensions can be useful when intentional, but excessive use may cause text overflow, clipping, or poor responsiveness. Use Hug Contents, Fill Container, minimum dimensions, maximum dimensions, and flexible containers where appropriate.
A layout should not be tested only with short placeholder text. Realistic content can reveal wrapping, overflow, alignment, and spacing problems.
Good layout should support accessibility and usability. Designers should ensure that content remains readable, controls have sufficient space, information is not communicated only through position, and layouts work at different sizes.
Understand Content
|
v
Define Page Structure
|
v
Create Frames
|
v
Define Container Width
|
v
Create Layout Guides
|
v
Define Spacing System
|
v
Align Elements
|
v
Apply Auto Layout
|
v
Add Constraints Where Needed
|
v
Create Components
|
v
Test Responsive Behavior
|
v
Test Real Content
|
v
Review and Refine
Create a responsive landing page using the following structure:
Landing Page
|
+-- Header
| +-- Logo
| +-- Navigation
| +-- CTA
|
+-- Hero
| +-- Heading
| +-- Description
| +-- Button
| +-- Image
|
+-- Features
| +-- Feature Card
| +-- Feature Card
| +-- Feature Card
|
+-- Testimonials
|
+-- CTA Section
|
+-- Footer
Use Auto Layout for repeated structures and responsive behavior, and use layout guides to establish alignment.
Create a mobile application screen containing:
Use vertical and horizontal Auto Layout to organize the interface.
Create a dashboard with a sidebar, header, metric cards, chart area, and table.
Dashboard
|
+-- Sidebar
|
+-- Main
|
+-- Header
+-- Metric Cards
+-- Chart Section
+-- Table Section
Use nested Auto Layout, consistent spacing, alignment, and responsive resizing rules.
Create a responsive product listing page with filters and product cards.
Product Page
|
+-- Header
+-- Search
+-- Category
|
+-- Content
|
+-- Filters
|
+-- Product Grid
+-- Card 1
+-- Card 2
+-- Card 3
+-- Card 4
Test the layout at desktop, tablet, and mobile widths.
Layout is the organization and arrangement of visual elements using position, size, spacing, alignment, containers, and responsive rules.
A Frame is a container that can hold other layers and provides features such as Auto Layout, constraints, layout guides, fills, and prototyping support.
Auto Layout is a layout system that automatically arranges and spaces child layers and allows designs to adapt to content and available space.
Padding is the space between a container's edge and its children, while gap is the space between child elements.
Constraints define how a child layer responds when its parent frame is resized.
Layout Guides are visual aids used to align elements and create consistent layout structures.
Hug Contents allows a supported Auto Layout frame or layer to size itself according to its content.
Fill Container allows a child layer to occupy available space inside its parent Auto Layout container.
Responsive layout allows interfaces to adapt to different screen sizes, orientations, and content conditions.
Nested Auto Layout allows different parts of a complex interface to have their own layout direction, spacing, padding, and resizing behavior.
| Concept | Key Point |
|---|---|
| Frame | Container for organizing layers |
| Section | Organizes related designs on the canvas |
| Alignment | Positions elements consistently |
| Spacing | Controls distance between elements |
| Padding | Space between container edge and children |
| Gap | Space between child elements |
| Layout Guide | Visual alignment aid |
| Constraint | Controls child response to parent resizing |
| Auto Layout | Automatically arranges and resizes content |
| Hug Contents | Sizes a layer according to content |
| Fill Container | Uses available parent space |
| Fixed | Keeps a defined dimension |
| Responsive Design | Adapts layouts to different screen conditions |
Layout Basics in Figma provide the foundation for creating organized, consistent, responsive, and professional digital interfaces. By understanding Frames, Sections, alignment, spacing, padding, layout guides, columns, constraints, and Auto Layout, designers can move beyond manually positioned designs and create structured interfaces that are easier to maintain.
A professional layout system should combine clear visual hierarchy, consistent spacing, reusable containers, responsive behavior, and realistic content testing. Auto Layout, constraints, layout guides, components, and variables can work together to create scalable design systems for websites, mobile applications, dashboards, e-commerce platforms, and other digital products.
To learn Figma through practical UI/UX projects and industry-oriented training, visit JustAcademy Figma Training and Register for Figma Course Demo.
